<template>
  <div style="padding: 20px">
    <div
        style="
        border-bottom: 1px solid #e3e3e3;
        font-size: 16px;
        padding: 20px;
        text-align: center;
      "
    >
      收藏列表
    </div>

    <div v-if="collectList && collectList.length > 0">
      <van-row
          v-for="(i, index) in collectList"
          :key="index"
          :gutter="10"
          @click="gotoProductInfo(i)"
          style="
          border-bottom: 1px solid #e3e3e3;
          background: #fff;
          text-align: center;
        "
      >
        <van-col :span="10" style="text-align: center">
          <img :src="i.img" style="width: 100%" />
        </van-col>
        <van-col :span="6" style="text-align: center; line-height: 124px">
          <span>{{ i.name }}</span>
        </van-col>
        <van-col :span="6" style="text-align: right; line-height: 124px">

          <span>{{ i.unit }}{{ i.totalPrice }}</span>
        </van-col>
        <van-col :span="2" style="text-align: right; line-height: 124px">
          <van-icon name="arrow" />
        </van-col>
      </van-row>
    </div>
    <van-empty description="还没有收藏哦" v-else />
<!--    这段代码是一个Vue.js组件，用于显示收藏列表。当`collectList`数组不为空时，会渲染一个带有收藏商品的列表；当`collectList`为空时，会显示一个提示“还没有收藏哦”的空状态。具体来说：-->

<!--    1. `<div v-if="collectList && collectList.length > 0">`：当`collectList`数组不为空且长度大于0时，显示该`div`元素及其子元素。-->
<!--    2. `<van-row>`：使用Vant UI库中的`van-row`组件创建一个行容器。-->
<!--      3. `v-for="(i, index) in collectList"`：遍历`collectList`数组，将每个元素赋值给变量`i`，同时获取当前元素的索引值`index`。-->
<!--      4. `:key="index"`：为每个`van-row`元素设置唯一的`key`属性，值为当前元素的索引值。-->
<!--      5. `:gutter="10"`：设置行之间的间距为10像素。-->
<!--      6. `@click="gotoProductInfo(i)"`：为每个`van-row`元素添加点击事件，当用户点击时调用`gotoProductInfo`方法并传入当前元素`i`。-->
<!--      7. `style="border-bottom: 1px solid #e3e3e3; background: #fff; text-align: center;"`：为每个`van-row`元素设置样式，包括底部边框、背景颜色和文本居中对齐。-->
<!--      8. `<van-col :span="10" style="text-align: center">`：使用Vant UI库中的`van-col`组件创建一个列容器，占据10个栅格，文本居中对齐。-->
<!--        9. `<img : style="width: 100%" />`：为每个商品图片设置宽度为100%。-->
<!--        10. `<van-col :span="6" style="text-align: center; line-height: 124px">`：创建一个占据6个栅格的列容器，文本居中对齐，行高为124px。-->
<!--          11. `<span>{{ i.name }}</span>`：显示当前商品的名称。-->
<!--          12. `<van-col :span="6" style="text-align: right; line-height: 124px">`：创建一个占据6个栅格的列容器，文本右对齐，行高为124px。-->
<!--            13. `<span>{{ i.unit }}{{ i.totalPrice }}</span>`：显示当前商品的单位和总价。-->
<!--            14. `<van-col :span="2" style="text-align: right; line-height: 124px">`：创建一个占据2个栅格的列容器，文本右对齐，行高为124px。-->
<!--              15. `<van-icon name="arrow" />`：显示一个名为“arrow”的图标。-->
<!--              16. `<van-empty description="还没有收藏哦" v-else />`：当`collectList`为空时，显示一个空状态，提示“还没有收藏哦”。-->

    <div class="my-button">
      <div style="padding: 10px 20px" @click="addCart">
        <span> 全部添加购物车 </span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
import { showDialog } from "vant";
import { myMixin } from "./../mixin.js";

import { userStore } from "../store/piniaStore";
const { errorMsgBox, successMsgBox } = myMixin();

const useUserStore = userStore();
const router = useRouter();
let collectList = useUserStore.collectList;
let cartList = useUserStore.cartList;

function gotoProductInfo(i) {
  if (!i.num) i.num = 1;
  i.totalPrice = i.num * i.price;
  window.localStorage.setItem("currentProduct", JSON.stringify(i));
  window.localStorage.setItem("lastPage", "collect");

  router.push("productInfo");
}

function addCart() {
  if (collectList && collectList.length > 0) {
    collectList.forEach((i) => {
      i.num = 1;
      i.totalPrice = i.price;
      let isExist = cartList.some((cartProduct) => {
        if (cartProduct.id == i.id) {
          cartProduct.num += 1;
          cartProduct.totalPrice = cartProduct.num * i.price;
          return true;
        }
      });
      if (!isExist) {
        cartList.push(i);
      }
    });
    useUserStore.calcluteCart();

    successMsgBox("添加成功");
  }
}
// 这段代码是一个 Vue.js 组件，主要功能是处理收藏列表和购物车列表。以下是代码的详细解释：
//
// 1. 导入所需的依赖库和模块，包括 Vue、Vue Router、Vant UI 库中的 showDialog 方法、自定义的 myMixin 混入对象以及 Pinia 状态管理库中的 userStore。
// 2. 从 userStore 中获取 collectList（收藏列表）和 cartList（购物车列表）。
// 3. 定义一个名为 gotoProductInfo 的方法，用于跳转到商品详情页面。该方法接收一个参数 i，表示当前选中的商品。在跳转前，会将商品的 num（数量）设置为 1
// （如果没有设置的话），并计算商品的总价（totalPrice）。然后将当前商品信息存储到 localStorage 中，并将最后访问的页面设置为 "collect"。最后，使用 Vue Router 的 push 方法跳转到 "productInfo" 路由。
// 4. 定义一个名为 addCart 的方法，用于将收藏列表中的所有商品添加到购物车中。
// 首先判断收藏列表是否存在且长度大于 0，然后遍历收藏列表中的每个商品。对于每个商品，
// 将其 num 设置为 1，并计算其总价。接着检查购物车列表中是否已经存在该商品，如果不存在，
// 则将该商品添加到购物车列表中。最后，调用 useUserStore.calcluteCart() 方法
// 重新计算购物车的总价，并弹出一个成功添加的提示框。
</script>

<style></style>
